<template>
    <div class="menu">
        <el-aside :width="!isCollapse ? '250px' : '64px'">
            <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" :unique-opened="true" @open="handleOpen"
                @close="handleClose" active-text-color="#D9A914" background-color="#2F3036" text-color="#fff" router
                :default-active="activePath" :collapse-transition="false">
                <el-menu-item>
                    <div class="menu-header">
                        <div class="left-img">
                            <el-avatar :size="46" :src="circleUrl" />
                        </div>
                        <!-- <span>{{ username }}</span>
                        <span>
                            <el-icon><ArrowDown /></el-icon>
                        </span>
                        <span>
                            <el-button size="small" round>Small</el-button>
                        </span> -->
                        <el-dropdown trigger="click" v-if="isCollapse === false">
                            <div class="right-version">
                                {{ username }}
                                <el-icon>
                                    <ArrowDown />
                                </el-icon>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>一晃二三年</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-menu-item>
                <!-- 一级菜单 -->
                <el-sub-menu :index="item.name + ''" v-for="    item     in     menuArr    ">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <!-- 二级菜单 -->
                    <el-menu-item :index="itemSon.frontpath + ''" v-for="    itemSon     in     item.child    "
                        @click="saveNavState(itemSon.frontpath)">
                        <el-icon>
                            <component :is="itemSon.icon"></component>
                        </el-icon>
                        {{ itemSon.name }}
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>

    </div>
</template>
<script setup>
import { ref } from 'vue'
import { menuApi } from '@/api/login'
import { onMounted } from 'vue';
// 引入 mitt
import emitter from '../utils/bus'
const isCollapse = ref(false)
onMounted(() => {
    emitter.on('collapse', (e) => {
        isCollapse.value = e
    })
    // isCollapse.value = false
})
// isCollapse.value = false
const handleOpen = (key, keyPath) => {
    // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    // console.log(key, keyPath)
}
const menuArr = ref([])
// const iconArr = ref([])
console.log('menuArr', menuArr);
// 头像
const circleUrl = ref()
// 用户名
const username = ref()
//  二级菜单点击事件 名称
function saveNavState(activePath) {
    sessionStorage.setItem('activePath', activePath)
    // activePath = sessionStorage.getItem('activePath')
}
// 定义 被激活高亮的链接地址
const activePath = ref()
// console.log('activePath',activePath);
// onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码
onMounted(() => {
    // console.log('location',location);
    activePath.value = sessionStorage.getItem('activePath')

})
// 调用 菜单 接口
menuApi().then(res => {
    console.log('res', res);
    const menuArrSon = res.data.data.menus
    // console.log('menuArrSon',menuArrSon);
    // 将后端的头像 给 avatar
    const avatar = res.data.data.avatar
    menuArr.value = menuArrSon
    circleUrl.value = avatar
    // 用户名
    const name = res.data.data.username
    username.value = name
})
</script>
<style scoped lang="scss">
.menu {
    // width: 250px;

    .el-menu-vertical-demo {
        background-color: #2F3036;
        // width: 88px;
        height: 100vh;
        border-top-right-radius: 55px
    }
}

// .el-menu-item{
//     height: 126px;
// }
.menu-header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    // margin-top: px;
}

.right-version {
    margin-left: 15px;
    margin-top: 26px;
    // display: flex;
}

.el-menu {
    overflow: hidden;
}
</style>